<template>
  <div class="PurchaseType">
    <dv-border-box-8 style="padding-top: 15px">
      <dv-decoration-7 style="width: 100%; height: 30px"
        >购买类型数量统计</dv-decoration-7
      >
      <div id="PurchaseType" style="height: 350px; width: 100%"></div>
    </dv-border-box-8>
  </div>
</template>

<script>
import { getPurchaseType } from "@/api/visualization.js";
export default {
  name: "PurchaseType",
  data() {
    return {
      PurchaseTypeData: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getPurchaseType().then((res) => {
        console.log(res.data);
        const colors = [
          "#37A2DA",
          "#32C5E9",
          "#67E0E3",
          "#64FEDA",
          "#68F0AE",
          "#9FE6B8",
        ];
        res.data.forEach((element, index) => {
          element.color = colors[index % colors.length]; // 根据索引选择颜色
          this.PurchaseTypeData.push(element);
        });
        this.initEchart();
      });
    },

    initEchart() {
      let myChart5 = this.$echarts.init(document.getElementById("PurchaseType"));
      let option5= {
        legend: {},
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["油画", "水彩画", "素描", "版画", "雕塑", "其他"],
          name: "类型",
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "购买数量",
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        series: [
          {
            data: this.PurchaseTypeData.map((item) => ({
              value: item.usage_count,
              itemStyle: {
                color: item.color,
              },
            })),
            type: "bar",
          },
        ],
      };
      option5 && myChart5.setOption(option5);
    },
  },
};
</script>

<style lang="less" scoped>

</style>
